<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
<style>
  .red {
    color: red !important;
  }

  .search {
    width: 300px;
    margin: 20px 0;
  }

  .my-form {
    display: flex;
    margin: 20px 0;
  }

  .my-form input {
    flex: 1;
    margin-right: 20px;
  }

  .table> :not(:first-child) {
    border-top: none;
  }

  .contain {
    display: flex;
    padding: 10px;
  }

  .list-box {
    flex: 1;
    padding: 0 30px;
  }

  .list-box a {
    text-decoration: none;
  }

  .echarts-box {
    width: 600px;
    height: 400px;
    padding: 30px;
    margin: 0 auto;
    border: 1px solid #ccc;
  }

  tfoot {
    font-weight: bold;
  }

  @media screen and (max-width: 1000px) {
    .contain {
      flex-wrap: wrap;
    }

    .list-box {
      width: 100%;
    }

    .echarts-box {
      margin-top: 30px;
    }
  }
</style>


<div id="app">
  <div class="contain">
    <!-- 左侧列表 -->
    <div class="list-box">

      <!-- 添加资产 -->
      <form class="my-form">
        <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
        <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
        <button @click="add" type="button" class="btn btn-primary">添加账单</button>
      </form>

      <table class="table table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>消费名称</th>
            <th>消费价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="item.id">
            <td>{{index + 1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.price}}</td>
            <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
          </tr>

        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">消费总计： {{totalPrice}}</td>
          </tr>
        </tfoot>
      </table>
    </div>

    <!-- 右侧图表 -->
    <div class="echarts-box" id="main"></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  /**
   * 接口文档地址：
   * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
   * 
   * 功能需求：
   * 1. 基本渲染
   * 2. 添加功能
   * 3. 删除功能
   * 4. 饼图渲染
   */
  //  1. 基本渲染
  // (1) 调接口获取数据 (在created)
  // (2) 把数据存到data中
  // (3) 利用v-for 渲染到页面中
  // (4) 利用计算属性 统计消费

  // 2. 添加功能
  // (1) 利用v-model获取数据
  // (2) 给添加按钮注册点击事件, 发送添加请求
  // (3) 需要重新渲染

  // 3. 删除功能
  // (1) 注册点击事件 传id
  // (2) 掉接口传id
  // (3) 需要重新渲染

  // 4. 饼图渲染
  // (1) 初始化一个饼图 echarts.init(dom)
  // (2) 根据数据变化更新饼图  echarts.setOption({...})

  const app = new Vue({
    el: '#app',
    data: {
      list: [],
      name: '',
      price: 0,
      myChart: ''
    },
    computed: {
      totalPrice() {
        return this.list.reduce((sum, item) => sum + item.price, 0)
      }
    },
    async created() {
      // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
      //     params: {
      //         creator: '小黑'
      //     }
      // })
      // this.list = res.data.data
      this.getList()
    },
    // 可以操作dom
    mounted() {
      // 从echarts文档中 cv进来
      let chartDom = document.getElementById('main')
      this.myChart = echarts.init(chartDom)
      let option;
      option = {
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              // { value: 1048, name: 'Search Engine' },
              // { value: 735, name: 'Direct' },
              // { value: 580, name: 'Email' },
              // { value: 484, name: 'Union Ads' },
              // { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && this.myChart.setOption(option);
    },
    methods: {
      async getList() {
        const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          params: {
            creator: '小黑'
          }
        })
        this.list = res.data.data

        // 更新图表
        this.myChart.setOption({
          // 数据项
          series: [
            {
              data: this.list.map(item => ({value: item.price, name: item.name}))
            }
          ]
        })
      },
      async add() {
        // 健全
        if (!this.name) {
          alert('请输入名称')
          return
        }
        if (typeof this.price !== 'number') {
          alert('请输入正确价格')
          return
        }
        // 发送添加请求
        const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
          creator: '小黑',
          name: this.name,
          price: this.price
        })
        this.getList()
        this.name = ''
        this.price = ''
      },
      async del(id) {
        const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
        this.getList()
      }
    }
  })
</script>